<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .cur{
        background-color: #b3dfea;
        font-size: large;
    }
    .pageInput{
        width: 30px;
    }
  </style>
</head>
<body>
<div id="app">
  <div>
    <input type="button" @click="curPage = 1" value="首页">
    <input type="button" :disabled="curPage <=1" @click="pre" value="前一页">
    <input type="button" v-show="(curPage-2)>0" v-model="pre2" @click="curPage = pre2">
    <input type="button" v-show="(curPage-1)>0" v-model="pre1" @click="curPage = pre1">
    <input class="cur" type="button" v-model="curPage">
    <input type="button" v-show="(total-curPage)>=1" v-model="next1" @click="curPage = next1">
    <input type="button" v-show="(total-curPage)>=2" v-model="next2" @click="curPage = next2">
    <input type="button" :disabled="curPage>=total" @click="next" value="下一页">
    <input type="button" @click="curPage=total" value="尾页">
    <input class="pageInput" type="number" v-model="goto">
    <button @click="skip">跳转</button>
  </div>
</div>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script>
  const App = {
    data(){
      return{
        curPage:4,
        total:20,
        pre1:0,
        pre2:0,
        next1:0,
        next2:0,
        goto:''
      }
    },
    watch:{
      curPage(page){
        this.pre1= page -1;
        this.pre2 = page -2;
        this.next1 = page +1;
        this.next2 = page +2;
      }
    },
    methods:{
      pre(){
        this.curPage--;
        if(this.curPage<=1){
          this.curPage = 1;
        }
      },
      next(){
        this.curPage++;
        if(this.curPage>=this.total){
          this.curPage = this.total;
        }
      },
      skip(){
        if(this.goto>=this.total){
          this.curPage = this.total;
          return;
        }
        if(this.goto <= 1){
          this.curPage = 1;
          return;
        }
        this.curPage = parseInt(this.goto);
      }

    },
    mounted(){
      this.curPage = 1;
    }
  }
  Vue.createApp(App).mount("#app");
</script>
</body>
</html>